<template>
  <div id="category">
    <NavBar class="navbar">
      <div slot="center">商品分类</div>
    </NavBar>
    <div class="content">
      <scroll class="scroll" :pull-up-load="true">
        <category-menu
          :menuList="categories"
          @menuItemClick="menuItemClick"
        ></category-menu>
      </scroll>
      <category-menu-item ref='item' :categoryData="categoryData"></category-menu-item>

    </div>
  </div>
</template>

<script>
import { getCategory, getSubCategory } from "network/category.js";
import scroll from "@/components/common/scroll/scroll";
import NavBar from "@/components/common/navbar/NavBar";
import CategoryMenu from "./childcomps/CategoryMenu";
import CategoryMenuItem from "./childcomps/CategoryMenuItem";
export default {
  name: "Category",
  components: {
    NavBar,
    CategoryMenu,
    CategoryMenuItem,
    scroll,
  },
  data() {
    return {
      categories: [],
      categoryData: [],
      currentIndex: -1,
    };
  },
  created() {
    this.getData();

  },


  methods: {
    getData() {
      getCategory().then((res) => {
        this.categories = res.data.category.list;
        this.getSubData(0);


      });
    },
    getSubData(index) {
      this.currentIndex = index
      const maitKey = this.categories[index].maitKey;
        getSubCategory(maitKey).then((res) => {
          this.categoryData = res.data.list;

        });
    },
    menuItemClick(index) {
      this.getSubData(index);

    },

  },
};
</script>

<style scoped>
.navbar {
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  background-color: var(--color-tint);
}
.scroll {
  height: calc(100vh - 44px - 49px);
  overflow: hidden;
}
.content {
  display: flex;
}

</style>
